<template>
0
    <body id="building">
        <header>
            <!-- <div class="l-content"> -->
                <!-- <el-button plain icon="el-icon-menu" size="mini">首页</el-button> -->
                <el-button-group>
                    <el-button type="primary" icon="el-icon-s-home">首页</el-button>
                    <el-button type="primary" icon="el-icon-s-shop">服务</el-button>
                    <el-button type="primary" icon="el-icon-s-promotion">概况</el-button>
                </el-button-group>
                <!-- <h3 style="color:#fff"></h3> -->
            <!-- </div> -->
            <div class="r-content">
                <el-dropdown trigger="hover" size="mini">
                    <span>
                        <img :src="require('../assets/images/user.png')" class="user">
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>个人主页</el-dropdown-item>
                        <el-dropdown-item>退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </header>
    </body>
</template>

<style lang="less" scoped>

#building{
    background: linear-gradient(#1A6BE6,white);
    margin:0;
    padding:0;
    border:0
}

header{
    // background:url('../assets/TJU.png');
    //         // background: url('../src/assets/TJU.jpeg');
    // background-size: 100% 100%;
    // // position: fixed;//固定定位
    width: auto;
    display: flex;
    height: 100%;
    justify-content: space-between;
    align-items: center;
}

.el-button{
    height: 60px;
    width: 160px;
}

// 用户个人页面
.r-content{
    .user{
        width:40px;
        height: 40px;
        border-radius: 50%;
        align-items: center;
    }
}

</style>